<template>
  <div class="demo-spin-article">
    <div slot="title" style="margin: 10px 0">
      <div class="edit-head">
        <a @click="goBack" class="back-title">
          <Icon type="ios-arrow-back" />返回
        </a>
      </div>
    </div>
    <div style="margin-bottom: 20px">
      <Input
        v-model="vehicleNums"
        placeholder="输入车牌号"
        style="width: 300px"
      />
      <Button style="margin-left: 20px" type="primary" @click="mapSearch"
        >搜索</Button
      >
    </div>
    <div class="springFrame">
      <div id="container-map"></div>
      <div ref="infoData" class="custom-info input-card content-window-card">
        <div class="info-top">
          <div>
            <span>车辆定位</span>
            <span style="font-size: 11px; margin-left: 20px; color: #f00"
              >状态：{{
                devInfo.registStatus == "1"
                  ? "已认证"
                  : devInfo.registStatus == "2"
                  ? "待审核"
                  : "已注销"
              }}</span
            >
          </div>
          <img
            @click="closeInfoWindow"
            src="https://webapi.amap.com/images/close2.gif"
          />
        </div>
        <div class="info-middle" style="background-color: white">
          <div class="info-a-title" style="color: blue">
            {{ devInfo.vehicleNum ? devInfo.vehicleNum : "--" }}
          </div>
          <div class="info-a-title">地址：{{ address ? address : "--" }}</div>

          <div class="info-div">
            姓名：
            {{ devInfo.driverName ? devInfo.driverName : "--" }}
          </div>
          <span class="info-span">
            电话：{{ devInfo.driverPhone ? devInfo.driverPhone : "--" }}<br />
            <div class="info-div">
              运输中：{{ devInfo.taskState == "0" ? "空闲" : "满载" }}
            </div>
            <span class="info-span">
              装载吨数：{{
                devInfo.goodWeight ? devInfo.goodWeight + " 吨" : "0"
              }}</span
            ><br />
            <div class="info-div">
              车辆类型：{{
                this.$options.filters["TypeGoods"](devInfo.vehicleType)
              }}
            </div>
            <span class="info-span"> 距离装货地：{{ devInfo.distance }}</span>
            <div class="info-div">
             车主电话：{{
                devInfo.contactPhone?devInfo.contactPhone:'未填写'
              }}
            </div>
              <div class="info-a-title">
              所有人：{{
                devInfo.vehicleOwner ? devInfo.vehicleOwner : "未填写"
              }}
            </div>
          </span>
          <div class="but-css">
            <div></div>
            <div class="butss">
              <Button @click="dispatchClick(devInfo)">调度</Button>
            </div>
          </div>
        </div>

        <div
          class="info-bottom"
          style="position: relative; top: 0px; margin: 0px auto"
        >
          <img src="https://webapi.amap.com/images/sharp.png" />
        </div>
      </div>
    </div>
    <div>
      <div id="container"></div>
    </div>
    <!-- <div class="info">
      点击地图上的点标记，打开所添加的自定义信息窗体
    </div> -->
    <!--  -->
    <div class="search-css">
      <Row>
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="68"
          class="search-form"
          style="width: 1680px"
        >
          <FormItem label="查询范围" prop="goodNo">
            <Input
              v-model="searchForm.range"
              placeholder="请输入查询范围"
              style="width: 200px"
            >
            </Input>
            KM
          </FormItem>
          <FormItem label="车辆状态">
            <Select
              clearable
              v-model="searchForm.vehicleState"
              style="width: 180px"
              placeholder="请选择车辆状态"
            >
              <Option value="">全部</Option>
              <Option value="0">空车</Option>
              <Option value="1">满载</Option>
            </Select>
          </FormItem>
          <span style="margin-left: 35px" class="br">
            <Button @click="getmapCapacity" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
            <Button @click="getmapCapacity" icon="md-refresh">刷新</Button>
          </span>
          <div>
            <div style="display: flex">
              <div></div>
              <div style="margin-left: 10px" class="Check-css">货物类型:</div>
            </div>
            <RadioGroup
              v-model="searchForm.goodsTypaes"
              @on-change="checkAllGroupChange"
            >
              <Radio
                v-for="(item, index) in goodType"
                :key="index"
                :label="item.label"
              >
              </Radio>
            </RadioGroup>
          </div>
          <div style="display: flex">
            <div>
              <div style="display: flex">
                <div style="margin: 10px 0"></div>
                <div style="margin: 10px 0; margin-left: 10px">
                  货物二级分类:
                </div>
              </div>
              <CheckboxGroup
                v-model="searchForm.goodsSubTypaes"
                @on-change="goodsCheckbox"
              >
                <Radio v-model="toSingle" @on-change="toChange">全部</Radio>
                <Checkbox
                  v-for="(item, index) in dangerousList"
                  :key="index"
                  :label="item.description"
                ></Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </Form>
      </Row>
    </div>
    <!--  -->
    <div class="line"></div>
    <!--  -->
    <div>
      <Form
        ref="searchForm"
        :model="vehicleForm"
        inline
        :label-width="85"
        class="search-form"
      >
        <FormItem label="驾驶员名称" prop="name">
          <Input
            type="text"
            v-model="vehicleForm.name"
            placeholder="请输入驾驶员名称"
            clearable
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="车牌号码" prop="vehicleNum">
          <Input
            type="text"
            v-model="vehicleForm.vehicleNum"
            placeholder="请输入车牌号码"
            clearable
            style="width: 200px"
          />
        </FormItem>

        <FormItem label="车辆状态">
          <Select
            clearable
            v-model="vehicleForm.registStatus"
            style="width: 180px"
          >
            <Option value="">全部</Option>
            <Option value="0">空车</Option>
            <Option value="1">满载</Option>
          </Select>
        </FormItem>

        <Button
          style="margin-left: 35px"
          @click="getUserDataList"
          type="primary"
          icon="ios-search"
          >搜索</Button
        >
        <Button style="margin-left: 15px" @click="handleResetV">重置</Button>
        <Button
          style="margin-left: 15px"
          @click="getUserDataList"
          icon="md-refresh"
          >刷新</Button
        >
      </Form>
      <Row>
        <div style="width: 100%; overflow-x: auto">
          <Table
            :loading="vehicleLoading"
            border
            :columns="columns"
            :data="vehicleData"
            ref="table"
            @on-select="selectData"
            height="280"
          >
            <template late slot-scope="{ row }" slot="actionCarriage">
              <div style="display: flex">
                <div>
                  <span
                    style="color: #2d8cf0; cursor: pointer"
                    @click="selectCar(row)"
                    >选择
                  </span>
                </div>
                <div
                  style="color: #2d8cf0; cursor: pointer; margin-left: 10px"
                  @click="getVehicleposition(row)"
                >
                  定位
                </div>
              </div>
            </template>
          </Table>
        </div>
      </Row>
      <Row type="flex" justify="end" class="page" style="margin-top: 2vh">
        <Col span="24" style="text-align: right">
          <Page
            transfer
            :current="vehicleForm.pageNumber"
            :total="vehicletotal"
            :page-size="vehicleForm.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[5, 10, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Col>
      </Row>
    </div>
    <!--  -->
    <div>
      <div class="tables">
        <div class="venhr">委托车辆列表</div>
        <div>
          <Button
            style="margin-bottom: 15px"
            @click="listOrderGrabbing"
            icon="md-refresh"
            >刷新</Button
          >
        </div>
      </div>
      <el-table
        :header-cell-style="{ background: '#F5F5F5', color: '#606266' }"
        ref="table"
        border
        size="small"
        :data="entrustedVehicleList"
        style="width: 99.5%"
        :rules="rules"
        height="270"
        empty-text="暂无数据"
        v-loading="entrustedoading"
      >
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="220"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.createTime ? scope.row.createTime : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="driverName" label="驾驶员" width="120">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.driverName ? scope.row.driverName : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="vehicleNum" label="车辆" width="120">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.vehicleNum ? scope.row.vehicleNum : "--" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="loadingTime"
          label="装车时间"
          width="220"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.loadingTime ? scope.row.loadingTime : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" prop="transGoodWeight" label="配载重量">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{
                scope.row.transGoodWeight
                  ? scope.row.transGoodWeight + "吨"
                  : "0" + "吨"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.remarks ? scope.row.remarks : "---" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderSource" label="来源" width="120">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.orderSource == "1" ? "自主抢单" : "平台派单" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column width="160" prop="bookbuytime" label="操作">
          <template slot-scope="scope">
            <div>
              <span
                v-if="scope.row.driverState == '1'"
                class="scope-text"
                @click="entrustClick(scope.row)"
                >委托</span
              >
              <span
                v-if="scope.row.driverState == '1'"
                class="scope-text"
                @click="cancel(scope.row)"
                >取消</span
              >
              <!-- class="scope-text"
                @click="delegated(scope.row)" -->
              <span
                style="font-size: 14px; color: #ff7f00"
                v-if="scope.row.driverState == '2'"
                >已委托</span
              >
              <!-- class="scope-text"
                @click="canceled(scope.row)" -->
              <span
                style="font-size: 14px; color: #ff7f00"
                v-else-if="scope.row.driverState == '3'"
                >已取消</span
              >

              <span class="scope-text" @click="getVehicleposition(scope.row)"
                >定位</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Row type="flex" justify="end" class="page" style="margin-top: 2vh">
        <Col span="24" style="text-align: right">
          <Page
            transfer
            :current="entrustedVehicleForm.pageNumber"
            :total="entrustedVehicleForm.total"
            :page-size="entrustedVehicleForm.pageSize"
            @on-change="changePageEntrusted"
            @on-page-size-change="changePageSizeEntrusted"
            :page-size-opts="[5, 10, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Col>
      </Row>
    </div>
    <Modal
      width="800"
      v-model="curMapAddress"
      title="车辆当前位置"
      @on-cancel="cancelMap"
    >
      <div style="margin-bottom: 10px">
        <div>定位车辆：{{ carVehicle }}</div>
        <div>当前车速：{{ carspd }}km/h</div>
        <div>定位时间：{{ carTime }}</div>
        <div>当前位置：{{ caraddress }}</div>
      </div>
      <div class="modal-box">
        <div style="width: 100%; height: 400px" id="themap" class="map"></div>
      </div>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button @click="curMapAddress = false" style="margin-left: 8px"
          >取消</Button
        >
      </div>
    </Modal>
    <!-- 选择时间 -->
    <Modal width="300" v-model="loadingTimeModal" title="选择装车时间">
      <Select
        clearable
        v-model="loadingTime"
        style="width: 230px"
        placeholder="选择装车时间"
      >
        <Option
          v-for="(item, index) in loadingTimeList"
          :key="index"
          :value="item"
          >{{ item }}
        </Option>
      </Select>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button
          @click="addLoadingTime"
          :loading="addsLoading"
          style="margin-left: 8px"
          >添加</Button
        >
      </div>
    </Modal>

    <!--  -->
    <Modal width="600" v-model="entrusteModal" title="确认委托">
      <div style="display: flex">
        <div class="entrusTitle">托运方</div>
        <div class="entrustText">{{ entrusteData.companyName }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">委托驾驶员</div>
        <div class="entrustText">{{ entrusteData.driverName }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">委托车辆</div>
        <div class="entrustText">{{ entrusteData.vehicleNum }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">货源编号</div>
        <div class="entrustText">{{ entrusteData.goodNo }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">货物类型</div>
        <div class="entrustText">
          {{ this.$options.filters["TypeGoods"](entrusteData.goodType) }}
        </div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">货物名称</div>
        <div class="entrustText">{{ entrusteData.goodSubType }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">运费单价</div>
        <div class="entrustText">
          {{ entrusteData.freightUnitPrice + " 元/吨" }}
        </div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">装卸路线</div>
        <div class="entrustText">
          {{ entrusteData.beginCityName }}-{{ entrusteData.endCityName }}
        </div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">装车时间</div>
        <div class="entrustText">{{ entrusteData.loadingTime }}</div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">配载吨位</div>
        <div class="entrustText">
          <Input
            type="text"
            v-model="stowageTonnage"
            placeholder="请输入配载吨位"
            clearable
            style="width: 200px"
          />
        </div>
      </div>
      <div style="display: flex">
        <div class="entrusTitle">运输要求</div>
        <div class="entrustText">
          <Input
            type="text"
            v-model="requirement"
            placeholder="请输入运输要求"
            clearable
            style="width: 200px"
          />
        </div>
      </div>

      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button
          type="primary"
          @click="entrustConfirm"
          :loading="entrustLoading"
          style="margin-left: 8px"
          >确认委托</Button
        >
      </div>
    </Modal>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import {
  getGoodsDetails, //获取货源详情
  getdriverPage, //转发布 --- 获取驾驶员列表
  addQuotationRecord, //// 抢单 填写装车时间、修改装车时间
  getNotLoadingTime, //根据货源id获取未抢单的装货时间
  platformQuotationRecord, //抢单列表
  entrustDriver, //委托
  cancelQuotationRecord, //取消
  Gaudemap,
} from "@/api/index";
import {
  vehicleposition, //车辆位置
  getVehicleGpalInfoVo,
  vehicleListDispatch, // 运力地图 --- 查询车辆位置信息
} from "@/api/monitoring";
import GPS from "@/libs/GPS";
import iconMap from "@/assets/cak.png";

import iconGreen from "@/assets/green.png";
import iconRed from "@/assets/red.png";
export default {
  data() {
    return {
      spinShow: false, //全局加载
      curMapAddress: false, //车辆弹框
      mapVehic: null,
      marker: null,
      caraddress: "",
      carspd: "",
      carVehicle: "",
      carTime: "",
      //
      searchFormTable: {},
      // 车辆列表搜索
      vehicleForm: {
        goodsId: "",
        vehicleNum: "",
        name: "",
        pageNumber: "1",
        pageSize: "5",
        // sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        registStatus: "",
      },
      vehicletotal: "5",
      vehicleData: [],
      vehicleLoading: false,
      entrustedoading: false,
      //
      columns: [
        {
          title: "#",
          type: "index",
          width: 60,
        },
        {
          title: "驾驶员",
          key: "name",
          render: (h, params) => {
            if (params.row.name != "" && params.row.name != null) {
              return h("div", params.row.name);
            } else {
              return h("div", "---");
            }
          },
        },
        {
          title: "车辆",
          key: "vehicleNum",
        },
        {
          title: "车辆类型",
          key: "vehicleType",
          sortable: false,
          render: (h, params) => {
            let text = this.$options.filters["TypeGoods"](
              params.row.vehicleType
            );
            return h("div", text);
          },
        },
        {
          title: "车辆状态",
          key: "registStatus",
          render: (h, params) => {
            let colorStatus = "";
            let titleText = "";
            if (params.row.registStatus == 0) {
              colorStatus = "error";
              titleText = "空车";
            } else if (params.row.registStatus == 1) {
              colorStatus = "success";
              titleText = "满载";
            } else {
              colorStatus = "error";
              titleText = "未知";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: colorStatus,
                  text: titleText,
                },
              }),
            ]);
          },
        },
        {
          title: "能源类型",
          key: "oilType",
          render: (h, params) => {
            let text = this.$options.filters["OILTYPE"](params.row.oilType);
            return h("div", text);
          },
        },
        {
          title: "联系电话",
          key: "phone",
        },
        {
          title: "操作",
          slot: "actionCarriage",
          align: "center",
          fixed: "right",
          width: 120,
        },
      ],
      data: [],
      //
      settlementData: [],
      shoW: false,
      showApm: true,
      devInfo: {
        registStatus: "",
        title: "",
        icon: "",
        state: "",
        address: "",
        electricity: "",
        gas: "",
        guan: "",
        water: "",
        years: "",
        time: "",
        mianji: "",
      },
      address: "",
      zoomSize: "",
      map: null,
      markerData: [],

      greaterThanMarker: null,
      //选择时间
      loadingTimeModal: false,
      loadingTime: "",
      loadingTimeList: [],
      selectTimeData: {},
      // 确认委托
      entrusteModal: false,
      stowageTonnage: "", //配载吨位
      requirement: "", //运输要求
      entrusteData: { companyInfoVo: {} },
      //
      goodIds: {},
      detailsGoods: {}, //详情数据
      // 委托车辆列表
      entrustedVehicleForm: {
        orderGoodsId: "",
        pageNumber: 1,
        pageSize: 5,
        total: "",
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      entrustedVehicleList: [],
      entrustLoading: false,
      // 运力地图
      searchForm: {
        goodsTypaes: "全部",
        goodsTypae: "",
        goodsSubTypaes: [],
        goodsSubTypae: "",
        vehicleState: "",
        areaCode: "",
        goodsId: "",
        range: "",
      },
      goodsSingle: false, //一级全选
      toSingle: true, //二级全选
      goodType: [], //货物类型
      dangerousList: [], //危险品分类
      addsLoading: false,
      n: 0,
      vehicleNums: "",
      marker: "",
    };
  },
  mounted() {
    this.goodType = JSON.parse(window.localStorage.getItem("good_type"));
    this.goodType.forEach((item) => {
      item.label = item.description;
      if (item.subList) {
        item.subList.forEach((item2) => {
          item2.label = item2.description;
        });
        item.children = item.subList;
      }
    });
    this.goodType.unshift({
      description: "全部",
      dictId: 10000,
      label: "全部",
      title: "",
      value: "全部",
    });
    this.goodIds = JSON.parse(this.$route.query.key);
    this.init();
  },
  created() {},
  methods: {
    // 搜索
    mapSearch() {
      let arr = {};
      this.markerData.forEach((item) => {
        if (this.vehicleNums == item.vehicleNum) {
          return (arr = item);
        } else {
          // return (arr = {});
        }
      });
      if (arr.lon) {
        this.map.setCenter([Number(arr.lon), Number(arr.lat)]);
      } else {
        return this.$Message.warning("暂时没有找到这辆车，请重新输入");
      }
    },
    init() {
      this.getDataList();
      this.getUserDataList();
      this.listOrderGrabbing();
      this.getmapCapacity();
    },
    // 运力地图 --- 查询车辆位置信息
    getmapCapacity() {
      this.spinShow = true;
      let arr = [];
      if (this.searchForm.goodsSubTypaes) {
        this.dangerousList.forEach((item) => {
          this.searchForm.goodsSubTypaes.forEach((e) => {
            if (item.description == e) {
              arr.push(item.value);
            }
          });
        });
        this.searchForm.goodsSubTypae = arr.join(",");
      } else {
        this.searchForm.goodsSubTypae = "";
      }
      if (this.searchForm.goodsTypaes == "全部") {
        this.searchForm.goodsTypae = "";
      }
      this.loading = true;
      for (let item in this.searchForm) {
        if (!this.searchForm[item]) {
          delete this.searchForm[item];
        }
      }
      this.searchForm.goodsId = this.goodIds.goodId;
      vehicleListDispatch(this.searchForm).then((res) => {
        this.spinShow = false;
        if (res.code == 200) {
          this.markerData = res.result;
          this.map = this.createMap();
          this.map.clearMap();
          this.addMarker();
        } else {
          this.$Message.error(res.message);
          this.map = this.createMap();
          this.map.clearMap();
          this.addMarker();
        }
      });
    },
    // 重置
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.goodsTypaes = "全部";
      this.searchForm.goodsTypae = "";
      this.searchForm.goodsSubTypaes = [];
      this.searchForm.goodsSubTypae = "";
      this.searchForm.LoadingAddress = "";
      this.searchForm.areaCode = "";
      this.searchForm.range = "";
      this.searchForm.vehicleState = "";
      this.toSingle = true;
      this.dangerousList = [];

      this.getmapCapacity();
    },
    // 货物类型全选
    radioChange(val) {
      if (val) {
        this.searchForm.goodsTypae = "";
        this.searchForm.goodsSubTypaes = [];
        this.searchForm.goodsSubTypae = [];
        this.toSingle = true;
        this.dangerousList = [];
      }
    },
    // 货物类型
    checkAllGroupChange(val) {
      if (val == "全部") {
        return this.radioChange(true);
      }
      this.searchForm.goodsSubTypaes = [];
      this.searchForm.goodsSubTypae = "";
      this.goodType.forEach((item) => {
        if (item.label == val) {
          this.searchForm.goodsTypae = item.value;
          axios.get("/freight/dictData/getByType/" + item.title).then((res) => {
            if (res.success) {
              this.dangerousList = res.result;
            }
          });
        }
      });
    },
    // 货物二级分类 全选
    toChange(val) {
      if (val) {
        this.searchForm.goodsSubTypaes = [];
        this.searchForm.goodsSubTypae = [];
      }
    },
    // 货物二级分类
    goodsCheckbox(val) {
      this.toSingle = false;
    },
    // 驾驶员列表
    getUserDataList() {
      this.vehicleLoading = true;
      this.vehicleForm.goodsId = this.goodIds.goodId;
      getdriverPage(this.vehicleForm).then((res) => {
        this.vehicleLoading = false;
        if (res.code == 200) {
          this.vehicleData = res.result.records;
          this.vehicletotal = res.result.total;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 车辆重置
    handleResetV() {
      this.vehicleForm.vehicleNum = "";
      this.vehicleForm.name = "";
      this.vehicleForm.registStatus = "";
      this.getUserDataList();
    },
    changePage(v) {
      this.vehicleForm.pageNumber = v;
      this.getUserDataList();
    },
    changePageSize(v) {
      this.vehicleForm.pageSize = v;
      this.getUserDataList();
    },
    // 详情接口
    getDataList() {
      this.subRemarks = "";
      getGoodsDetails({ goodsid: this.goodIds.goodId }).then((res) => {
        if (res.code == 200) {
          this.detailsGoods = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    //调度
    dispatchClick(row) {
      if (row.vehicleType == this.detailsGoods.goodType) {
        getNotLoadingTime({ goodId: this.goodIds.goodId }).then((res) => {
          if (res.code == 200) {
            this.loadingTimeList = res.result;
            this.loadingTimeModal = true;
            this.selectTimeData = row;
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        this.$Message.warning("车辆类型和货物类型不一致");
      }
    },
    // 选择
    selectCar(row) {
      if (row.vehicleType == this.detailsGoods.goodType) {
        getNotLoadingTime({ goodId: this.goodIds.goodId }).then((res) => {
          if (res.code == 200) {
            this.loadingTimeList = res.result;
            this.loadingTimeModal = true;
            this.selectTimeData = row;
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        this.$Message.warning("车辆类型和货物类型不一致");
      }
    },
    // 选择后的添加
    addLoadingTime() {
      if (this.loadingTime) {
        this.loadingTimeModal = false;
        // this.settlementData.push(this.selectData);
        let data = {
          userId: this.selectTimeData.driverId, //驾驶员Id
          quotationRecordId: "", //报价记录Id
          goodsId: this.goodIds.goodId, //货源Id
          loadingTime: this.loadingTime, //装货时间
        };
        this.addsLoading = true;
        addQuotationRecord(data).then((res) => {
          this.addsLoading = false;
          if (res.code == 200) {
            this.$Message.success("添加成功");
            this.loadingTime = "";
            this.listOrderGrabbing();
          } else {
            this.$Message.error(res.message);
            this.loadingTime = "";
          }
        });
      } else {
        this.$Message.warning("请选择装车时间");
      }
    },
    //抢单列表
    listOrderGrabbing() {
      this.entrustedVehicleForm.orderGoodsId = this.goodIds.goodId;
      this.entrustedoading = true;
      platformQuotationRecord(this.entrustedVehicleForm).then((res) => {
        this.entrustedoading = false;
        if (res.code == 200) {
          if (res.result.records.length > 0) {
            this.entrustedVehicleList = res.result.records;
            this.entrustedVehicleForm.total = res.result.total;
          } else {
            this.entrustedVehicleList = [];
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    changePageEntrusted(v) {
      this.entrustedVehicleForm.pageNumber = v;
      this.listOrderGrabbing();
    },
    changePageSizeEntrusted(v) {
      this.entrustedVehicleForm.pageSize = v;
      this.listOrderGrabbing();
    },
    // 委托
    entrustClick(row) {
      this.entrusteModal = true;
      this.entrusteData = row;
    },
    // 确认委托
    entrustConfirm() {
      if (!this.stowageTonnage) {
        return this.$Message.warning("请输入配载吨位");
      }
      this.entrustLoading = true;
      let data = {
        quotationRecordId: this.entrusteData.quotationRecordId,
        goodWeight: this.stowageTonnage,
        content: this.requirement,
      };
      entrustDriver(data).then((res) => {
        this.entrustLoading = false;
        if (res.code == 200) {
          this.$Message.success("委托成功");
          this.listOrderGrabbing();
          this.entrusteModal = false;
          this.stowageTonnage = "";
          this.requirement = "";
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 已委托
    delegated(row) {},
    // 取消
    cancel(row) {
      this.$Modal.confirm({
        title: "确认取消",
        content: "确认将委托的车辆取消？",
        loading: true,
        onOk: () => {
          cancelQuotationRecord({
            quotationRecordId: row.quotationRecordId,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("取消成功");
              this.listOrderGrabbing();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 已取消
    canceled(row) {},
    // 取消
    cancelMap() {
      this.curMapAddress = false;
    },
    //获取车辆最新位置
    getVehicleposition(vehicleNum) {
      this.entrustedoading = true;
      this.vehicleLoading = true;
      this.spinShow = true;
      let obj = { vehicleId: vehicleNum.vehicleId };
      vehicleposition(obj).then((res) => {
        this.entrustedoading = false;
        this.vehicleLoading = false;
        this.spinShow = false;
        if (res.code == 200) {
          res.result.records[0].mark = GPS.gcj_encrypt(
            Number(res.result.records[0].callat),
            Number(res.result.records[0].callon)
          );
          this.carVehicle = vehicleNum.vehicleNum; //车牌
          axios
            .get(
              "https://restapi.amap.com/v3/geocode/regeo?location=" +
                [
                  res.result.records[0].mark.lon,
                  res.result.records[0].mark.lat,
                ] +
                "&key=" +
                Gaudemap +
                "&batch=" +
                true +
                " "
            )
            .then((res) => {
              this.caraddress = res.regeocodes[0].formatted_address;
            });
          this.carspd = res.result.records[0].mark.speed; //车速

          this.carTime = this.conversionTime(
            res.result.records[0].mark.devicetime
          ); //时间
          this.curMapAddress = true;
          let val = [];
          val.push(res.result.records[0].mark.lat);
          val.push(res.result.records[0].mark.lon);
          this.mapShow(val);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    conversionTime(val) {
      if (val > 100000) {
        var now = new Date(val),
          y = now.getFullYear(),
          m = now.getMonth() + 1,
          d = now.getDate(),
          x =
            y +
            "-" +
            (m < 10 ? "0" + m : m) +
            "-" +
            (d < 10 ? "0" + d : d) +
            " " +
            now.toTimeString().substr(0, 8);
        return x;
      } else {
        return 0;
      }
    },
    mapShow(val) {
      let startx = val[1];
      let starty = val[0];
      var map = new AMap.Map("themap", {
        resizeEnable: true,
        // center: val[0],
        center: [val[1], val[0]],
        zoom: 13,
      });
      var begin = new AMap.Marker({
        position: new AMap.LngLat(startx, starty), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: "https://webapi.amap.com/images/car.png",
      });
      map.add(begin);
      // this.marker.setMap(map);
    },

    //1.创建map对象
    createMap() {
      let this_ = this;
      //1.地图初始化时，在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
      var mapData = new AMap.Map("container-map", {
        zoom: 8,
        resizeEnable: true,
        center: [this.detailsGoods.beginLng, this.detailsGoods.beginLat], //地图中心点位置
      });
      //获取当前地图级别
      var logMapinfo = function () {
        this_.zoomSize = 8;
        this_.addMarker();
      };
      logMapinfo();
      // 正在缩放';
      function mapZoom() {
        logMapinfo();
      }
      // 事件绑定
      function zoomOn() {
        mapData.on("zoomchange", mapZoom);
      }
      zoomOn();
      return mapData;
    },
    //2.添加点标记
    addMarker() {
      const this_ = this;
      let arr = [];
      // 注意传递的经纬度坐标要是数值型
      this.markerData.forEach((item) => {
        item.mark = GPS.gcj_encrypt(Number(item.lat), Number(item.lon));
      });

      this.markerData.forEach((item) => {
        this_.n++;
        item.distance = this.getdiscount(
          this.detailsGoods.beginLat,
          this.detailsGoods.beginLng,
          item.lat,
          item.lon
        );
        let marker1 = new AMap.Marker({
          position: [item.mark.lon, item.mark.lat], //位置
          offset: new AMap.Pixel(-3, -30), //偏移
          icon: new AMap.Icon({
            image: item.taskState == "0" ? iconGreen : iconRed,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(35, 35),
          }),
        });
        // 0......................
        // 初始化坐标点自定义窗口
        this.aainitInfoWindow(item.mark.lon, item.mark.lat);
        marker1.setLabel({
          offset: new AMap.Pixel(0, 0),
          content: this.aacreateInfoWindow(item),
          direction: "bottom",
        });
        marker1.setMap(this.map);
        // 0......................
        arr.push(
          Object.assign(item, {
            mapId: marker1._amap_id,
            distance: item.distance,
          })
        );
        marker1.setMap(this_.map);

        AMap.event.addListener(marker1, "click", (e) => {
          this_.markerClick(arr, marker1);
        });
      });
    },
    // 初始化信息窗体
    aainitInfoWindow(lng, lat, item) {
      this.infoWindow = new AMap.InfoWindow({
        isCustom: false, //使用自定义窗体
        anchor: "bottom-center",
        content: "",
        offset: new AMap.Pixel(0, -20),
        autoMove: true,
        closeWhenClickMap: false,
      });
    },
    // 创建信息窗体
    aacreateInfoWindow(item) {
      if (this.n < this.markerData.length - 1) {
      }
      return `
      <div >
          <div >${item.vehicleNum}</div>
        </div>
      `;
    },
    //3.点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
    markerClick(arr, marker) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id);
      getVehicleGpalInfoVo({ gpsEquipment: arrNew[0].gpsEquipment }).then(
        (res) => {
          if (res.code == 200) {
            this.devInfo = res.result;
            this.devInfo.distance = arrNew[0].distance;
            axios
              .get(
                "https://restapi.amap.com/v3/geocode/regeo?location=" +
                  [arrNew[0].mark.lon, arrNew[0].mark.lat] +
                  "&key=" +
                  Gaudemap +
                  "&batch=" +
                  true +
                  " "
              )
              .then((res) => {
                this.address = res.regeocodes[0].formatted_address;
                let infoWindow = this.createInfoWindow();
                this.openInfoWindow(infoWindow, marker);
              });
          } else {
            this.$Message.error(res.message);
          }
        }
      );

      let infoWindow = this.createInfoWindow();
      this.openInfoWindow(infoWindow, marker);
    },
    //4.构建自定义窗体
    createInfoWindow() {
      let infoWindowData = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs.infoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(16, -45),
      });
      return infoWindowData;
    },

    //5.打开窗体
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition());
    },
    //6.关闭窗体
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
    // 返回
    goBack() {
      if (this.$route.query.modifys == 2) {
        this.$router.push({
          name: "detailsModal",
          query: {
            key: this.$route.query.key,
            modifys: this.$route.query.modifys,
          },
        });
      } else if (this.$route.query.modifys == 3) {
        this.$router.push({
          name: "examine-goods",
          query: {
            key: this.$route.query.key,
            modifys: this.$route.query.modifys,
          },
        });
      } else if (this.$route.query.modifys == 4) {
        this.$router.push({
          name: "examine-goods",
          query: {
            key: this.$route.query.key,
            modifys: this.$route.query.modifys,
          },
        });
      }
    },
    getdiscount(lat1, lng1, lat2, lng2) {
      // console.log(paramObj)
      var lng1 = lng1;
      var lat1 = lat1;
      var lng2 = lng2;
      var lat2 = lat2;
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      s = s * 1000;
      if (isNaN(s)) {
        return 0 + "m";
      }
      if (s > 1000) {
        //    大于1000米时
        s = Math.floor((s / 1000) * 100) / 100;
        s = s.toFixed(2) + "km";
      } else {
        //    小于1000米直接返回
        s = s.toFixed(2) + "m";
      }
      return s;
    },
  },
};
</script>

<style>
html,
body,
#container-map {
  height: 800px;
  width: 100%;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 28rem;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

/* span {
  margin-left: 5px;
  font-size: 11px;
} */

.info-middle img {
  float: left;
  margin-right: 6px;
}

.info-span {
  /* margin-left: 35px; */
  font-size: 14px;
}

.info-div {
  width: 200px;
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
}

.info-img {
  width: 40px;
  height: 40px;
}

.info-a-title {
  font-size: 14px;
  margin: 5px 0;
  margin-left: 10px;
}
#container-map {
  height: 820px;
}
/* #container .amap-icon img,
.amap-marker-content img {
  width: 64px;
  height: 64px;
} */
.springFrame {
  height: 600px;
  width: 95%;
  overflow: hidden;
}
/* 第二层 */
/* <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> */

.collision-btn.disable {
  background-image: none;
  color: lightgrey;
  border-color: lightgrey;
  cursor: not-allowed;
}
.collision-btn.disable:hover {
  background-color: #fff;
  border-color: lightgrey;
}
.input-card .btn {
  margin-right: 0.8rem;
}
.title {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.5em 1em;
  height: auto;
  border-radius: 2px;
  font-weight: 500;
  font-size: 20px;
  width: 307px;
  margin-left: -153px;
  text-align: center;
}
</style>
<style lang="less" scoped>
.search-css {
  margin-top: 20px;
  margin-left: 10px;
}
.Check-css {
  margin-bottom: 10px;
}
.line {
  margin: 20px 0;
  border: 1px solid #eee;
}
.but-css {
  background-color: white;
  display: flex;
  justify-content: flex-end;
}
.butss {
  // padding: 8px;
  padding-top: 0;
}
.scope-text {
  font-size: 14px;
  margin-left: 8px;
  color: #2d8cf0;
  cursor: pointer;
}
.entrusTitle {
  font-size: 16px;
  margin: 5px 0;
}
.entrustText {
  font-size: 16px;
  margin: 5px 0;
  margin-left: 30px;
}
.venhr {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
}
.tables {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
// 自定义窗体的样式
/deep/.info-window {
  padding: 10px;
  // background: rgba(4, 77, 145, 0.753);
  color: red !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;

  .info-name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 800;
    color: red !important;
  }

  .info-num {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #a5a3a1;

    > span {
      font-size: 14px;
      color: #3196fa;

      &.active-color {
        color: #ef4864;
      }
    }
  }
}
// @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>